<template>
<div id="app" class="app">
<el-row :gutter="20">
  <el-col :span="24"><div class="grid-content title">VOC在线监测数据</div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">非甲烷总烃</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a24088Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">毫克/立方米</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right">系统维护</div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="1" fill="#FF0000">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="2" text-color="#FF0000">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">苯</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a25002Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">毫克/立方米</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right">系统运行</div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="3">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="4">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">甲苯</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a25003Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">毫克/立方米</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="5">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="6">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">二甲苯</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a25005Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">毫克/立方米</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="7">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="8">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">烟气温度</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a01012Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">摄氏度</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="9">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="10">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">烟气压力</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a01013Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">千帕</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="11">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="12">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">烟气流速</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a01011Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">米/秒 </div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="13">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="14">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">烟气湿度</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a01014Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">%</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="15">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="16">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">废气 </div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a00000Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">立方米/秒</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="17">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="18">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="1"><div class="grid-content"></div></el-col>
  <el-col :span="5"><div class="grid-content">氧气含量</div></el-col>
  <el-col :span="3"><div class="grid-content bg-purple">{{ a19001Rtd }}</div></el-col>
  <el-col :span="4"><div class="grid-content">%</div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="19">&nbsp;</el-radio></div></el-col>
  <el-col :span="4"><div class="grid-content grid-right"></div></el-col>
  <el-col :span="1"><div class="grid-content"><el-radio v-model="radio" label="20">&nbsp;</el-radio></div></el-col>
  <el-col :span="1"><div class="grid-content"></div></el-col>
</el-row>

</div>
</template>

<script>
export default {
  name: 'App',
  data: function() {
    return {
      a24088Rtd: '',
      a25002Rtd: '',
      a25003Rtd: '',
      a25005Rtd: '',
      a01012Rtd: '',
      a01013Rtd: '',
      a01011Rtd: '',
      a01014Rtd: '',
      a00000Rtd: '',
      a19001Rtd: '',
      radio: "2"

    }
  },
  methods: {
    getData: function(){
      var _this = this
      this.axios.post('/api/dataServer/getData')
                .then(function(res) {
                    console.log(res);
                    if (res.data.isSuccess == "Y") {
                        _this.a24088Rtd = res.data.data.a24088Rtd.value
                        _this.a25002Rtd = res.data.data.a25002Rtd.value
                        _this.a25003Rtd = res.data.data.a25003Rtd.value
                        _this.a25005Rtd = res.data.data.a25005Rtd.value
                        _this.a01012Rtd = res.data.data.a01012Rtd.value
                        _this.a01013Rtd = res.data.data.a01013Rtd.value
                        _this.a01011Rtd = res.data.data.a01011Rtd.value
                        _this.a01014Rtd = res.data.data.a01014Rtd.value
                        _this.a00000Rtd = res.data.data.a00000Rtd.value
                        _this.a19001Rtd = res.data.data.a19001Rtd.value
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });

    }
  },
  components: {
  },
  mounted: function mounted() {
    this.getData()
    //setInterval(this.getData, 1000);
  }
}
</script>

<style>
  .app {
    color: #FFFFFF;
    background: black;
    font-size: 30px;
    margin: 0 auto;
  }
  .title{
    font-size: 50px;
    text-align: center;
    justify-content: center;
  }
  .el-row {
    margin-bottom: 25px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    color: black;
    background: #FFFFFF;
    text-align: center;
    justify-content: center;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 56px;
    display: flex;
    align-items: center;
  }
  .grid-right {
    float: right;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>